<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>风味-购物车</title>
		<link rel="stylesheet" type="text/css" href="css/shoppingCart.css"/>
			<style>
			#add1{width: 80%;position: absolute;top:60%;bottom: 60px; left: 10%; background-color: #000;z-index: 2;opacity: 0.85;display: none;border-radius: 10px;}
			.add1_imgR{width: 22%;position: relative;margin-top:50px; margin-bottom:150px; float: right;margin-right: 7%;}
			.add1_imgL{width: 22%;position: relative;margin-top:50px; float: left;margin-left: 17%;}
			.del{position: relative;float: right;width: 10%;}
		</style>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script>
		$(function(){

			$.ajax("/fengwei/shopping/showCart",{
				type:"get",
				data:{},
				success:function(data){
					var dataObj = eval('('+data+')');
					console.log(dataObj);
					setData(dataObj);

				},
				error:function(){
					alert(0);
				}
			});

			function setData(dataObj) {

				if(dataObj.length == 0){
					var content = document.getElementById("content");
					content.innerHTML = "<span style='color: red;font-size: 20px;'>快去商城看看吧</span>"
				} else{

				}

				for (var i = 0; i < dataObj.length; i++) {

					var goodsName = dataObj[i].goodsName;
					var arr = dataObj[i].fileUrl.split("\\");
					var src = arr[arr.length - 2] + "/" + arr[arr.length - 1];
					var goodsIntroducts = dataObj[i].goodsIntroducts;
					var goodsCity = dataObj[i].goodsCity;
					var goodsSize = dataObj[i].goodsSize;
					var totalPrice = dataObj[i].totalprice;


					var content = document.getElementById("content");
					var newDiv = document.createElement("div");
					newDiv.setAttribute('class', 'goodsCon');
					content.appendChild(newDiv);

					newDiv.innerHTML = "<span class='radiostyle'>" +
							"<input type='radio' name='sumfee' id='sumfee' class='sumfee1' value=''/></span>" +
							"<a class='storeName'>" + goodsName + "></a>" +
							"<input type='button' name='end' class='end' value='完成' style='border: none;background: none;font-size: 16px;position: absolute;top: 10px;left: 280px;display: none' />" +
							"<input type='button' name='editItem' class='editItem' value='编辑' style='margin-left:0%;position: absolute;left: 330px;top: 10px;' />" +
							"<img src='" + src + "'/><p class='goodsName'>" + goodsIntroducts + "</p>" +
							"<p class='growPlace'>产地：<span>" + goodsCity + "</span></p>" +
							"<span class='reduce'><img src='img/reduce.png' class='re'/></span>" +
							"<span class='amount'>x" + goodsSize + "</span>" +
							"<span class='increase'><img src='img/add.png' class='add'/></span>" +
							"<span class='money'>￥" + totalPrice + "</span>" +
							"<input type='button' name='deleteItem' class='deleteItem' value='删除' /> ";


					//单选按钮选中
					var sumfeeButton = document.getElementById("sumfee");
					var radiostyle = document.getElementsByClassName("radiostyle");
					var editItem = document.getElementsByClassName("editItem");
					var goodsCon = document.getElementsByClassName("goodsCon");
					var goodsName = document.getElementsByClassName("goodsName");
					var deleteItem = document.getElementsByClassName("deleteItem");
					var money = document.getElementsByClassName("money");
					var end = document.getElementsByClassName("end");
					var storeName = document.getElementsByClassName("storeName");
					var reduce = document.getElementsByClassName("reduce");
					var increase = document.getElementsByClassName("increase");
					var re = document.getElementsByClassName("re");
					var add = document.getElementsByClassName("add");


					//点击编辑按钮，使当前div中字体颜色改变


//					radiostyle[i].index = i;
//					radiostyle[i].onclick = function () {
//						console.log(this.index);
//						var count = this.index;
//						$(this).toggleClass('on');
//						sum(count,);
//					};


					editItem[i].index = i;
					editItem[i].onclick = function () {
						var count = this.index;
						this.style.color = "#FFCC33";
						storeName[count].style.color = "#FFCC33";
						$($('.radiostyle')[count]).addClass('on');
						end[count].style.display = "block";
						reduce[count].style.display = "block";
						increase[count].style.display = "block";
						deleteItem[count].style.display = "block";
					};

					deleteItem[i].index = i;
					deleteItem[i].onclick = function () {

						$(this).parent().remove();
						var count = this.index;

						$.ajax("/fengwei/shopping/deleteCart", {
							type: "post",
							data: {
								'shoppingcartId': dataObj[count].shoppingcartId
							},
							success: function (data) {

								console.log(data);
								window.location.reload();

							},
							error: function () {
								alert(0);
							}
						});
					};

					re[i].index = i;
					re[i].onclick = function () {
						console.log(this.index);
						var count = this.index;
						var amount = document.getElementsByClassName('amount')[count];
						amount.innerHTML = "x" + (parseInt(amount.innerHTML.substring(1)) - 1);
						console.log((parseInt(amount.innerHTML.substring(1))));
						document.getElementsByClassName('money')[count].innerHTML = '￥' + ((parseInt(amount.innerHTML.substring(1))) * dataObj[count].goodsPrice);

						if (parseInt(amount.innerHTML.substring(1)) == 0) {
							$($('.goodsCon')[count]).remove();
							$.ajax("/fengwei/shopping/deleteCart", {
								type: "post",
								data: {
									'shoppingcartId': dataObj[count].shoppingcartId
								},
								success: function (data) {

									console.log(data);
									window.location.reload();

								},
								error: function () {
									alert(0);
								}
							});

						}
					};

					add[i].index = i;
					add[i].onclick = function () {

						var count = this.index;
						var amount = document.getElementsByClassName('amount')[count];
						document.getElementsByClassName('amount')[count].innerHTML = "x" + (parseInt(amount.innerHTML.substring(1)) + 1);
						document.getElementsByClassName('money')[count].innerHTML = '￥' + (parseInt(document.getElementsByClassName('amount')[count].innerHTML.substring(1))) * dataObj[count].goodsPrice;
						if (parseInt(document.getElementsByClassName('amount')[count].innerHTML.substring(1)) > dataObj[count].totalSize) {

							document.getElementsByClassName('amount')[count].innerHTML = "x" + dataObj[count].goodsSize;
							document.getElementsByClassName('money')[count].innerHTML = "￥" + dataObj[count].totalprice;

						}


					};


					end[i].index = i;
					end[i].onclick = function () {

						var count = this.index;
						$(this).css('display', 'none');
						$($('.editItem')[count]).css('color', '#000000');
						$($('.storeName')[count]).css('color', '#000000');
						$($('.sumfee1')[count]).removeClass('on');
						$($('.reduce')[count]).css('display', 'none');
						$($('.increase')[count]).css('display', 'none');
						$($('.deleteItem')[count]).css('display', 'none');

						$.ajax("/fengwei/shopping/updateCart", {
							type: "post",
							data: {
								'shoppingcartId': dataObj[count].shoppingcartId,
								'goodsSize': parseInt(document.getElementsByClassName('amount')[count].innerHTML.substring(1)),
								'totalprice': parseInt(document.getElementsByClassName('money')[count].innerHTML.substring(1))
							},
							success: function (data) {

								console.log(data);
								window.location.reload();

							},
							error: function () {
								alert(0);
							}
						});

					};

				}

				for(var i=0;i<radiostyle.length-1;i++) {

					var totalfee = document.getElementById('totalfee');
					var totalPrice = parseInt(totalfee.innerHTML);
					totalfee.innerHTML = 0;
					radiostyle[i].index = i;
					radiostyle[i].onclick = function () {
						var count1 = this.index;
						$(this).toggleClass('on');
						var count = $('.on').length;
						var sum = 0;
						for(var j = 0;j<dataObj.length;j++){
							sum += parseInt(money[j].innerHTML.substring(1));
						}
						if(parseInt(totalfee.innerHTML) >= sum && $(this).is('.on')){
							console.log(totalPrice+","+this.index);
							totalPrice = 0;
						}

						if($(this).is('.on')){
							totalPrice += parseInt(money[count1].innerHTML.substring(1));
							totalfee.innerHTML = totalPrice;
							getdata(count1,count);
						}else{
							totalPrice -= parseInt(money[count1].innerHTML.substring(1));
							totalfee.innerHTML = totalPrice;
					console.log(123);
							getdata(count1,-1);
						}

						if(count == radiostyle.length-1){
							$(radiostyle[radiostyle.length-1]).addClass('in');
						} else{
							$(radiostyle[radiostyle.length-1]).removeClass('in');
						}
					};

					radiostyle[radiostyle.length-1].onclick = function(){//全部结算功能
						totalPrice = 0;
						$(this).toggleClass('in');
						for(var m=0;m<radiostyle.length-1;m++){
							if(!$(radiostyle[m]).is('.on')){
								$(radiostyle[m]).toggleClass('on');
							}else{
								$(radiostyle[m]).toggleClass('on');
							}
							getdata(m,m+1);
							totalPrice += parseInt(money[m].innerHTML.substring(1));
						}


						var count2 = $('.on').length;
						if(count2==radiostyle.length-1){
							totalfee.innerHTML = totalPrice;
						}  else if(count2 == 0){
							totalfee.innerHTML = 0;
						}

					};

				}

				var arr = new Array();
				function getdata(count1,count){

					if(count == -1){
						for(var i = 0;i < arr.length ; i++){
							if(arr[i] == dataObj[count1].shoppingcartId){
								arr[i] = 0;
							}
						}
					}else{
						arr[count-1] = dataObj[count1].shoppingcartId;
					}
				}



				$('#pay').click(function(){
					var info = "";
					for (var j = 0; j < arr.length; j++) {
						// 如果i+1等于选项长度则取值后添加空字符串，否则为逗号
						info = (info + arr[j]) + (((j + 1)== arr.length) ? '':',');
						console.log(info);
					}
					console.log(info);
					console.log(arr);
					function getUrl(){
						var str = location.href;//获取传过来的地址
						var arr = str.split("?");
						var str1 = arr[1];//获取？之后的内容
						userId = str1.split("=")[1];
						return userId;
					}
					$.ajax("/fengwei/shopping/payCart", {
						type: "post",
						data: {
							'in':info
						},
						success: function (data) {

							console.log(data);
							if(data == "true"){
								window.location.href = "success.html?user="+getUrl+"";
							} else{
								window.location.href = "Home.html?user="+getUrl+"";
							}

						},
						error: function () {
							alert(0);
						}
					});

				});




			}

		});

		</script>
	</head>
	<body>
		<div id="top">
			<p>购物车</p>
		</div>
		
		<div id="content">

		</div>
		
		<div id="sum">
			<span class="radiostyle">
				<input type="radio" name="sumfee" id="sumfee" value="" />
			</span>全部结算
			<p id="total">共计：<span id="totalfee">0</span>元</p>
			<input type="button" name="pay" id="pay" value="去结算" />
		</div>
		<div id="footer">
			<ul>
				<li id="homeGo"><img src="img/HOME_no.png"/></li>
				<li id="schoolGo"><img src="img/school1.png"/></li>
				<li id="add"> <img src="img/add.png" id="more" onclick="showDivFun()"/></li>
				<li id="shoppingGo"><img src="img/shopping1.png"/></li>
				<li id="userGo" class="active"><img src="img/USER-head_no.png"/></li>
			</ul>
		</div>

		<div id="add1">
			<img class="del" src="img/X.png" onclick="closeDivFun()"/>
			<a href="releaseOrder.html"><img class="add1_imgL" src="img/fadan.png"/></a>
			<a href="acceptOrder.html"><img class="add1_imgR" src="img/jiedan.png"/></a>
		</div>
		<!-- 页面跳转--hbl-->
		<script>
			$(function(){
				function getUrl(){
					var str = location.href;//获取传过来的地址
					var arr = str.split("?");
					var str1 = arr[1];//获取？之后的内容
					userId = str1.split("=")[1];
					return userId;
				}
				var homeGo = $("#homeGo");
				var schoolGo = $("#schoolGo");
				var shoppingGo = $("#shoppingGo");
				var userGo = $("#userGo");
				var add = $("#add")
				homeGo.click(function(){
					window.location.href = "Home.html?userId="+getUrl()+"";
				})
				schoolGo.click(function(){
					window.location.href = "School.html?userId="+getUrl()+"";
				})
				shoppingGo.click(function(){
					window.location.href = "shoppingCart.html?userId="+getUrl()+"";
				})
				userGo.click(function(){
					window.location.href = "personCenter.html?userId="+getUrl()+"";
				})
			})
		</script>
		<script>

			function showDivFun(){
				document.getElementById('add1').style.display='block';
			}
			//关闭事件
			function closeDivFun(){
				document.getElementById('add1').style.display='none';
			}
		</script>
	</body>
</html>
